<template>
  <div  style="
    height: 650px; width: 600px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);" >
     <div style="width: 70%; height: 80px;margin: 0 auto" class="show-time" >
       <span style="font-family: 'Britannic Bold', serif;font-size: 20px; " > 周易64卦推演系统 </span>
     </div>
    <div  class="showTime" >
      <div class="img_gua show-time" v-for="i in 8"  >
        <div >
          {{i}} {{  baseName[i-1]}}
           <yao  v-for="(e,index) in base8[i-1]" :key="index" :type="e" ></yao>
        </div>
      </div>
    </div>

    <div  style="height: 60px;width: 100%"  class="show-time" >
      <el-input  v-model="input1" size="medium" type="text"  style="width: 100px" ></el-input>  +
      <el-input  v-model="input2"  size="medium" type="text"  style="width: 100px"></el-input>
      <el-button style="margin-left: 10px;z-index: 1000" type="primary" @click="toReq()" >=</el-button>
    </div>


    <div class="ans_gua " style="margin: 0 auto" >
      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>卦象解析</span>
        </div>
         <div style="height: 200px" >
           <el-row :gutter="1">
             <el-col :span="6">
               <el-card>
               <div class="cloumFlex" >
                 {{guaName}}
                 <div class="cloumFlex">
                   <yao v-for="(e,index) in ans" :key="index" :type="e" ></yao>
                 </div>
               </div>
               </el-card>
             </el-col>

             <el-card>
              <el-col :span="24">

                <div v-html="explain" >  </div>
              </el-col>
             </el-card>

           </el-row>
         </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Yao from "@/components/yao.vue";

import {post,get} from "@/utils/http";



export default {
  name: "GuaShow",
  components: {Yao},
  data(){
    return{
      input1:'',
      input2:'',
      baseName:['坤','艮','坎','巽','震','离','兑','乾'],
      base8: ['000','001','010','110','100','101','011','111'],
      ans: '',
      guaName: '',
      explain:""
    }
  },
  methods:{
    /**
     *  获取结果
     */
     toReq(){
       let n1 = Number(this.input1);
       let n2 = Number(this.input2);
      console.log(n1)
      console.log(n2)
       if(n1===0||n2===0){
         this.$message.info("你未输入 \n 请输入1-8 对应序号")
         return
       }
       get('/divine',{
         target: this.base8[n1-1]+this.base8[n2-1]
       }).then(e=>{
         //  卦象 从 后往前 遍历 渲染 每一个 卦象
         this.ans  = e.data['id'].split("").reverse().join("")
         this.guaName = e.data['divinatoryName']
         let str = e.data['divinatoryExplain']
         let res = ""
         // 通过 取余运算 添加换行
         for (let i = 0; i < str.length; i++) {
           res += str[i]
           if(i%40==0&&i!==0){
               res+= "<br/>"
              }
         }
         this.explain = res
          console.log(e)
       })
     }
  }
}
</script>

<style scoped >
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  font-family: "Britannic Bold", serif;
  width: 450px;
  height: 360px;
}
.show-time{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.ans_gua{
  width: 80%;
  height: 180px;
}

.img_gua{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 50px;
  height: 70px;
  margin: 5px;
}
.clearfix{

}
.showTime{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100px;

}
.cloumFlex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 120px;

}
</style>